<template>
  <div class="item">
    <van-row flex v-if="!source.selfMsg" style="margin-top: 2%;margin-left: 2%">
      <van-col span="5">
        <van-image :width="itemHeight * 0.95" :height="itemHeight * 0.95" round :src="source.headPic" id="msgHeadPic" @load="imageLoadFinish"/>
      </van-col>
      <van-col span="19" align="left">
        <div style="margin-left: 4%;">
          <div id="other-nickname">
            <p>{{ source.nickname }}</p>
          </div>
          <div class="other-chat-content">
            <p>{{ source.content }}</p>
          </div>

        </div>
      </van-col>
    </van-row>

    <van-row flex justify="end" v-else style="margin-right: 2%;margin-top: 2%;">
      <van-col span="19">
        <div style="margin-right: 4%">
          <div>
            <p style="text-align: right">{{ source.nickname }}</p>
          </div>
          <div>
            <p style="float: right">{{ source.content }}</p>
          </div>
        </div>

      </van-col>

      <van-col span="5">
        <van-image round :src="source.headPic" @load="imageLoadFinish"
                   :width="itemHeight * 0.95" :height="itemHeight * 0.95"
                   style="margin-top: 5%;"/>
      </van-col>
    </van-row>
  </div>
</template>

<script setup lang="ts" >
defineProps({
  source: {
    type: Object,
    default: () => ({
      channelId: '',
      content: '',
      headPic: '',
      id: '',
      nickname: '',
      selfMsg: false,
    }),
  },
  imageLoadFinish:{
    type: Function
  },
  itemHeight:{
    type: Number
  }
});

</script>

<style lang="scss">
#msgHeadPic {
  margin-top: 5%;
}

#msgHeadPicNotLine {
  margin-left: 5%;
  margin-top: 5%;
  -webkit-filter: grayscale(100%);
}

</style>
